<template>
  <div id="visual">
      <div class="head">
          
          <Echars3D style=" width: 100%;height:100%"/>
      </div>
      <div class="visual_head">
          <ul class="container">
              <li v-for="item in visuals" :key="item.id">
                  <a :href="item.href">{{item.title}}</a>
              </li>
          </ul>
      </div>
      <TimeLine/>
  </div>
</template>

<script>
import Echars3D from '../../components/Echars3D.vue'
import TimeLine from '../../components/TimeLine.vue'
export default {
    data() {
        return {
            visuals:[
                {
                    title:'经济发展',
                    href:'http://akazijan.gitee.io/pages'
                },
                {
                    title:'生态环境',
                    href:'https://akazijan.gitee.io/pages_2'
                },
                {
                    title:'社会发展',
                    href:'https://akazijan.gitee.io/pages_4'
                },
                {
                    title:'能源结构',
                    href:'https://akazijan.gitee.io/pages_3'
                },
            ]
        }
    },
    components:{TimeLine,Echars3D}
}
</script>

<style lang='scss' scoped>
#visual{
    position: relative;
    .head{
        height: 800px;
    }
    .visual_head{
        
        background: #fff;
        ul{
            display: flex;
            justify-content: space-between;
            align-items: center;
            li{
                padding: 20px;
                list-style: none;
                cursor: pointer;
                
                a{
                    text-decoration: none;
                    color: black;
                    &:hover{
                    color: #DD4C28;
                    }
                }
            }
        }
    }
}
</style>